<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GO机网管理后台</title>
    <meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge">
    <link href="../../css/bootstrap.min.css" rel="stylesheet">
    <link href="css/nifty.min.css" rel="stylesheet">
    <link href="../../css/demo/nifty-demo-icons.min.css" rel="stylesheet">
    <link href="../../plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="../../plugins/pace/pace.min.css" rel="stylesheet">
    <script src="../../plugins/pace/pace.min.js?2016/8/5"></script>
    <script src="../../js/jquery-2.2.1.min.js"></script>
    
    <style>
        #table div{
            padding: 5px;
            margin: 0;
            color: #757575;
        }
        td{
            vertical-align: middle!important;

        }
        .panel.active{
            border-color: #2ac845;
        }
    </style>
</head>
<body id="main">
<div id="container" class="effect mainnav-lg">
    @@include('public/header.html')
    <div class="boxed">
        <div id="content-container">

            <!--Page Title-->
            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
            <div id="page-title" style="position: relative">
                <h1 class="page-header text-overflow">上门订单管理</h1>
                <div class="checkbox" style="position: absolute;right: 30px;top: 10px">
                    <label class="form-checkbox form-normal form-primary form-text"><input type="checkbox" id="open"> 是否开启自动派单</label>
                </div>
            </div>
            <!--End page title-->


            <!--Page content-->
            <!--===================================================-->
            <div id="page-content">
                <div id="page-wrapper">
                    <button type="button" class="btn btn-default active">待处理</button>
                    <button type="button" class="btn btn-default">待接单</button>
                    <button type="button" class="btn btn-default">待维修</button>
                    <button type="button" class="btn btn-default">待付款</button>
                    <button type="button" class="btn btn-default">待评价</button>
                    <button type="button" class="btn btn-default">已完成</button>
                </div>

                <div class="col-sm-12 pad-btm pad-top">
                    <table class="table table-striped" id="table">
                        <tr v-for="list in order_list">
                            <td style="width: 30%">
                                <div><span>订单状态：</span><span v-text="recycleStatus[o.status]"></span></div>
                                <div><span>订单编号：</span><span v-text="o.order_num"></span></div>
                                <div><span>下单时间：</span><span v-text="o.v_date"></span></div>
                                <div><span>回收金额预估：</span><span v-text="o.price"></span></div>
                            </td>
                            <td style="width: 30%">
                                <div><span>手机号码：</span><span v-text="o.phone_number"></span></div>
                                <div><span>地区：</span><span v-text="o.region"></span></div>
                                <div><span>详细地址：</span><span v-text="o.address"></span></div>
                                <div><span>上门时间：</span><span v-text="o.door_time"></span></div>
                            </td>
                            <td style="width: 25%">
                                <div><span>品牌及型号：</span><span v-text="o.v_name"></span></div>
                                <div><span>成色：</span><span v-text="o.price"></span></div>
                            </td>
                            <td style="width: 15%" class="text-center">
                                <button v-if="o.status==0" class="btn-primary btn" v-on:click="openModal(o);">指派订单</button>
                            </td>
                        </tr>
                        <tr v-if="orders.length==0">
                            <td colspan="4" style="text-align: center"><h4>没有对应状态的订单</h4></td>
                        </tr>
                    </table>
                </div>
            </div>
            <!--===================================================-->
            <!--End page content-->


        </div>

        <nav id="mainnav-container">
            @@include('public/left_menu.html')
        </nav>

    </div>
    
    
    <!-- 指派弹窗（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel">分配师傅</h4>
                </div>
                <div class="modal-body" style="text-align: center;">
                    <validator name="validation">
                        <span>请选择接单师傅：</span>
                        <select v-model="engineer" v-validate:engineer="{required: engineer}" style="min-width: 150px;">
                            <option v-for="e in engineers" value="{{e.member_id}}" v-text="e.m_name"></option>
                        </select>
                    </validator>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="addBrand" :disabled="!$validation.valid" v-on:click="assignOrder();">确定分配</button>
                </div>
            </div>
        </div>
    </div>

</div>
@@include('public/footer.html')

<script src="../../plugins/vue/vue.min.js"></script>
<script src="js/vue-validator.min.js"></script>
<script>
	var status = getQueryString("status");
    
    /*var recycleStatus = {
     "-1":"后台未处理",
     "0":"后台未处理",
     "1":"待接单",
     "2":"待回收",
     "3":"师傅确认",
     "4":"客户取消",
     "5":"答应回收",
     "6":"已完成",
     "7":"已评价"
     };*/
	
	var vue = new Vue({
		el:"#main",
		data:{
			orders:[],
			status:status,
			recycleStatus:recycleStatus,
			currentOrder:null,
			engineers:null,
			engineer:null
		},
		methods:{
            /*根据状态加载订单*/
			loadOrder:function(){
				var status = this.status;
				$.get(apiRecycle+"partner.php/Admin/Order/recycle_order_list",{
					status:status
				},function(res){
					vue.orders = res.data;
				}, "json");
			},
            
            /*分配订单*/
			assignOrder:function(){
				console.log(vue.engineer);
				
				$.post(apiRecycle+"partner.php/Admin/Order/assign_recycle_order", {
					rid:vue.currentOrder.rid,
					member_id:vue.engineer
				}, function(res){
					if(res.code==200){
						vue.currentOrder.status = 1;
						vue.engineer = null;
					} else {
						alert(res.message);
					}
				}, "json")
			},
            
            /*打开弹窗*/
			openModal:function(order){
				$.get(apiRecycle+"partner.php/Admin/Order/get_region_engineer", {re_id:order.region}, function(res){
					vue.currentOrder = order;
					$("#myModal").modal("show");
					vue.engineers = res.data;
				}, "json")
			}
		},
		ready:function(){
			this.loadOrder();
		}
	});
</script>
</body>
</html>
